<template>
  <div class="msg-list">
    <card :_Title="$t('message.my_message')" :_Tabs="status" :_Size="16"  @_Change="statusChange"/>

    <Table v-if="params.status != 'ALREADY_REMOVE' " :no-data-text="$t('message.no_data')" :columns="messageColumns" :data="messageData.records"></Table>
    <Table v-if="params.status == 'ALREADY_REMOVE' " :no-data-text="$t('message.no_data')" :columns="messageDelColumns" :data="messageData.records"></Table>
    <!-- 分頁 -->
    <Page
      style="float:right;margin-top:10px"
      :current="params.pageNumber"
      :total="messageData.total"
      :page-size="params.pageSize"
      @on-change="changePage"
      @on-page-size-change="changePageSize"
      :page-size-opts="[10, 20, 50]"
      size="small"
      show-total
      show-elevator
    ></Page>
  </div>
</template>
<script>
import {memberMsgList, readMemberMsg, delMemberMsg} from '@/api/member.js'
import i18n from "@/lang";
export default {
  i18n,
  data() {
    return {
      messageData: {}, // 消息數据
      // status: [ i18n.t('message.no_read'), i18n.t('message.al_read'), i18n.t('message.recycle_bin')],
      params: { // 請求參數
        pageNumber: 1,
        pageSize: 10,
        status: 'UN_READY'
      },
      // messageDelColumns: [ // table展示數据
      //   {
      //     title: i18n.t('message.title'),
      //     key: 'title',
      //     align: 'left',
      //     tooltip: true,
      //   },
      //   {
      //     title: i18n.t('message.content'),
      //     key: 'content',
      //     align: 'left',
      //     tooltip: true
      //   },
      //   {
      //     title: i18n.t('message.send_time'),
      //     key: 'createTime',
      //     align: 'left',
      //     width: 240
      //   },
      // ],
      // messageColumns: [ // table展示數据
      //   {
      //     title: i18n.t('message.title'),
      //     key: 'title',
      //     align: 'left',
      //     tooltip: true,
      //   },
      //   {
      //     title: i18n.t('message.content'),
      //     key: 'content',
      //     align: 'left',
      //     tooltip: true
      //   },
      //   {
      //     title: i18n.t('message.send_time'),
      //     key: 'createTime',
      //     align: 'left',
      //     width: 240
      //   },
      //   {
      //     title: i18n.t('message.operate'),
      //     key: 'action',
      //     align: 'center',
      //     fixed: 'right',
      //     width: 150,
      //     render: (h, params) => {
      //       if (params.row.status === 'UN_READY') {
      //         return h('div', [
      //           h(
      //             'Button',
      //             {
      //               props: {
      //                 type: 'info',
      //                 size: 'small'
      //               },
      //               style: {
      //                 marginRight: '5px'
      //               },
      //               on: {
      //                 click: () => {
      //                   this.setRead(params.row.id);
      //                 }
      //               }
      //             },
      //             i18n.t('message.al_read')
      //           ), h(
      //             'Button',
      //             {
      //               props: {
      //                 size: 'small',
      //                 type: 'error'
      //               },
      //               on: {
      //                 click: () => {
      //                   this.removeMessage(params.row.id);
      //                 }
      //               }
      //             },
      //             i18n.t('message.delete')
      //           )
      //         ]);
      //       } else if (params.row.status === 'ALREADY_READY') {
      //         return h('div', [
      //           h(
      //             'Button',
      //             {
      //               props: {
      //                 size: 'small',
      //                 type: 'error'
      //               },
      //               on: {
      //                 click: () => {
      //                   this.removeMessage(params.row.id);
      //                 }
      //               }
      //             },
      //             i18n.t('message.delete')
      //           )
      //         ]);
      //       } else {
      //
      //       }
      //     }
      //   }
      // ]
    }
  },
  computed:{
    status() {
      return [
        this.$t('message.no_read'),
        this.$t('message.al_read'),
        this.$t('message.recycle_bin')
      ];
    },
    messageDelColumns(){
      return[
        {
          title: i18n.t('message.title'),
          key: 'title',
          align: 'left',
          tooltip: true,
        },
        {
          title: i18n.t('message.content'),
          key: 'content',
          align: 'left',
          tooltip: true
        },
        {
          title: i18n.t('message.send_time'),
          key: 'createTime',
          align: 'left',
          width: 240
        },
      ]
    },
    messageColumns(){
      return[
        {
          title: i18n.t('message.title'),
          key: 'title',
          align: 'left',
          tooltip: true,
        },
        {
          title: i18n.t('message.content'),
          key: 'content',
          align: 'left',
          tooltip: true
        },
        {
          title: i18n.t('message.send_time'),
          key: 'createTime',
          align: 'left',
          width: 240
        },
        {
          title: i18n.t('message.operate'),
          key: 'action',
          align: 'center',
          fixed: 'right',
          width: 150,
          render: (h, params) => {
            if (params.row.status === 'UN_READY') {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      type: 'info',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.setRead(params.row.id);
                      }
                    }
                  },
                  i18n.t('message.al_read')
                ), h(
                  'Button',
                  {
                    props: {
                      size: 'small',
                      type: 'error'
                    },
                    on: {
                      click: () => {
                        this.removeMessage(params.row.id);
                      }
                    }
                  },
                  i18n.t('message.delete')
                )
              ]);
            } else if (params.row.status === 'ALREADY_READY') {
              return h('div', [
                h(
                  'Button',
                  {
                    props: {
                      size: 'small',
                      type: 'error'
                    },
                    on: {
                      click: () => {
                        this.removeMessage(params.row.id);
                      }
                    }
                  },
                  i18n.t('message.delete')
                )
              ]);
            } else {

            }
          }
        }
      ]
    }
  },
  methods: {
    // 消息狀態發生变化
    statusChange (index) {
      if (index === 0) { this.params.status = 'UN_READY' }
      if (index === 1) { this.params.status = 'ALREADY_READY' }
      if (index === 2) { this.params.status = 'ALREADY_REMOVE' }
      this.getList()
    },
    // 修改頁碼
    changePage (v) {
      this.params.pageNumber = v;
      this.getList();
    },
    // 修改頁數
    changePageSize (v) {
      this.params.pageSize = v;
      this.getList();
    },
    getList () { // 获取消息列表
      memberMsgList(this.params).then(res => {
        if (res.success) {
          this.messageData = res.result;
        }
      })
    },
    // 设置消息已讀
    setRead (id) {
      readMemberMsg(id).then(res => {
        if (res.success) {
          this.getList()
        }
      })
    },
    // 消息放入回收站
    removeMessage (id) {
      this.$Modal.confirm({
        title: '確認删除',
        // 記得確認修改此处
        content: '確認要删除此消息?',
        loading: true,
        onOk: () => {
          // 删除
          delMemberMsg(id).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success('消息已成功放入回收站');
              this.getList();
            }
          });
        },
      });
    }
  },
  mounted () {
    this.getList()
  }
}
</script>
<style lang="scss" scoped>

</style>
